<template>
	<view class="box">
		<view class="" style="position: fixed;top: 0;z-index: 10;">
			<view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
				<image @click="fanhui" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />信息对比
			</view>
			<view class="tit" style="background-color: #fff;">
				<view :class="titXuan == 1 ? 'xuan' : ''" @click="titClick(1)">房源对比</view>
				<view :class="titXuan == 2 ? 'xuan' : ''" @click="titClick(2)">车源对比</view>
			</view>
		</view>
		<view class="top" style="height: 188rpx;" :style="'padding-top:' + statusBarHeight1 + 'px'"></view>
		<view class="tuLiat" v-if="titXuan == 1">
			<view :style="'margin-left: 172rpx;'">
				<view class="div">
					<view class="li" v-for="(item,index) in data" :key="index">
						<view class="cuIcon-close guan" v-if="item.title" style @click="quchu(index)"></view>
						<view v-if="item.title">
							<image mode="aspectFit" v-if="item.displayDiagram" :src="item.displayDiagram"
								@click="clickImg(item.displayDiagram)" />
							<image mode="aspectFit" v-else-if="item.houseImage" :src="imgUrl + item.houseImage"
								@click="clickImg(imgUrl + item.houseImage)" />
							<p class="p1">{{ item.title }}</p>

							<p class="p2" v-if="item.transactionType== 2">{{ item.price}}万</p>
							<p class="p2" v-else>{{ item.price }}元</p>
						</view>
					</view>
				</view>
			</view>

			<p class="name">基础信息</p>
			<view class="form" :style="'width:' + formWidth + 'rpx;'">
				<view class="hang">
					<view>小区名称</view>
					<view>户型</view>
					<view>面积</view>
					<view>单价</view>
					<view>楼层</view>
					<view>年代</view>
					<view>装修</view>
					<view>电梯</view>
					<view style="height: 190rpx">户型信息</view>
				</view>
				<view class="hang1" v-for="(item, index) in data" :key="index">
					<view>{{ item.cell_name || item.cellName || "" }}</view>
					<view>{{ item.house_type || item.houseType || "" }}</view>
					<view>{{ item.AREA || "" }}{{ item.AREA ? "㎡" : "" }}</view>
					<view v-if="item.transactionType==2">
						{{
            (item.price*10000 / Number(item.AREA)) | nums
            }}元/㎡
					</view>
					<view v-else>
						{{item.price }}元/月
					</view>
					<view v-else></view>
					<view v-if="item.lcType == 1 && item.lou1.length">{{ item.lou1 }}层/共{{ item.lou3 }}层</view>
					<view v-if="item.lcType == 2 && item.lou1.length">
						{{ item.lou1 }}层-{{ item.lou2 }}层/共{{ item.lou3 }}层</view>
					<view v-if="item.lcType == 3 && item.lou1.length">共{{ item.lou3 }}层</view>
					<view v-if="!item.lcType"></view>
					<view class="" v-if="item.floor">


						{{item.floor.indexOf('|')>0?item.floor.split('|')[0]+'层/总'+item.floor.split('|')[1]+'层':''}}
					</view>
					<view>{{ item.years || "" }}</view>
					<view>{{ item.renovation || "" }}</view>
					<view>{{ item.elevator || "" }}</view>
					<view style="height: 190rpx">
						<image mode="aspectFit" :src="imgUrl + item.house_type_image"
							@click="clickImg(imgUrl + item.house_type_image)" />
					</view>
				</view>
			</view>
			<view style="position: fixed;top: 25%;left: 45%;width: 150px;color: #978c8c;" v-if="data.length == 0">
				暂无对比数据!</view>

		</view>
		<view class="tuLiat" v-if="titXuan == 2">
			<view :style="'margin-left: 172rpx;'">
				<view class="div">
					<view class="li" v-for="(item,index) in czdata" :key="index">
						<view class="cuIcon-close guan" v-if="item.vehicleBrandModel" style @click="czquchu(index)"></view>
						<view v-if="item.vehicleBrandModel">
							<image mode="aspectFit" v-if="item.vehicleCoverPicture" :src="item.vehicleCoverPicture"
								@click="clickImg(item.vehicleCoverPicture)" />
							<!-- <p class="p1">{{ item.vehicleBrandModel.split('|')[0] + ' '}} {{item.vehicleBrandModel.split('|')[1] || ""}}</p> -->
							<p class="p1"><text>{{item.title}}</text></p>
							<p class="p2">{{ item.price?item.price:item.intervalPrice}}万</p>
						</view>
					</view>
				</view>
			</view>
			
			<p class="name">基础信息</p>
			<view class="form" :style="'width:' + formWidth + 'rpx;'">
				<view class="hang">
					<view>所属厂商</view>
					<view>价格</view>
					<view>变速箱</view>
					<view>排量</view>
					<view>车身结构</view>
					<view>座位数(个)</view>
					<view>燃油类型</view>
					<view>排放标准</view>
				</view>
				<view class="hang1" v-for="(item, index) in czdata" :key="index">
					<view>{{ item.vehicleBrandModel.split('|')[0] + ' '}} {{item.vehicleBrandModel.split('|')[1] || ""}}</view>
					<view>{{item.title}}</view>
					<view>{{ item.price?item.price+"万":item.intervalPrice+"万"}}</view>
					<view>{{ item.transmissionCase == 1 ? '自动' : '手动' }}</view>
					<view>{{ item.displacement || "/" }}</view>
					<view>{{ item.bodyStructureVehicle || "/" }}</view>
					<view>{{ item.bodyStructureSeat+"座" || "/" }}</view>
					<view>{{ item.fuelType || "/" }}</view>
					<view>{{ item.emissionStandard || "/" }}</view>
				</view>
			</view>
			<view style="position: fixed;top: 25%;left: 45%;width: 150px;color: #978c8c;" v-if="czdata.length == 0">
				暂无对比数据!</view>
		</view>
		<uniBall></uniBall>
	</view>
</template>

<script>
	//#ifdef H5
	import wxshare from "../utils/index.js";
	//#endif
	import {
		mapGetters
	} from "vuex";
	import * as CFHL from "../components/calculatorForHouseLoan";
	export default {
		computed: {
			...mapGetters(["statusBarHeight1", "userinfo"])
		},
		filters: {
			nums(val) {
				return val.toFixed(2);
			}
		},
		data() {
			return {
				titXuan: 1,
				data: [],
				formWidth: 0,
				tuLiatWidth: 0,
				imgUrl: this.$imgSrc,
				czdata:[]
			};
		},
		mounted() {
			let contrastList = uni.getStorageSync("contrast");
			console.log(contrastList)
			this.czdata=uni.getStorageSync("czcontrast");
			console.log(this.czdata)
			this.tuLiatWidth = contrastList.length * 280;
			this.formWidth = contrastList.length * 280 + 142;
			/* #ifdef H5 */
			this.jinzhi();
			/* #endif */
			if (contrastList.length > 0) {
				for (var i = 0; i < contrastList.length; i++) {
					let contrast1 = contrastList[i];
					if (contrast1.id) {
						if (contrast1.hasOwnProperty("floor")) {
							let floor = contrast1.floor.split(",");
							contrast1.lcType = floor[0];
							if (floor[0] == 1) {
								contrast1.lou1 = floor[1];
								contrast1.lou3 = floor[2];
							} else if (floor[0] == 2) {
								contrast1.lou1 = floor[1];
								contrast1.lou2 = floor[2];
								contrast1.lou3 = floor[3];
							} else if (floor[0] == 3) {
								data.lou3 = floor[1];
							}
						}
						if (contrast1.houseImage) {
							contrast1.house_image = contrast1.houseImage.split("|")[0];
						}
						if (contrast1.houseTypeImage) {
							contrast1.house_type_image = contrast1.houseTypeImage.split("|")[0];
						}
						contrast1.AREA = contrast1.area;
						this.data.push(contrast1);
					}
				}
			}
		},
		onLoad(option) {
			if (option.type==1) {
				this.titXuan=2
			}
		},
		onShow() {
			this.data = this.data;
			this.czdata = this.czdata;
		},
		methods: {
			clickImg(url) {
				wx.previewImage({
					urls: [url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: "", // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {}
				});
			},
			quchu(index) {
				let contrastList = uni.getStorageSync("contrast");
				for (var i = 0; i < contrastList.length; i++) {
					if (contrastList[i].id == this.data[index].id) {
						contrastList.splice(i, 1);
						uni.setStorageSync("contrast", contrastList);
					}
				}
				this.data.splice(index, 1);
				this.tuLiatWidth = this.data.length * 280;
				this.formWidth = this.data.length * 280 + 142;
			},
			czquchu(index){
				let contrastList = uni.getStorageSync("czcontrast");
				for (var i = 0; i < contrastList.length; i++) {
					if (contrastList[i].id == this.czdata[index].id) {
						contrastList.splice(i, 1);
						uni.setStorageSync("czcontrast", contrastList);
					}
				}
				this.czdata.splice(index, 1);
				this.tuLiatWidth = this.czdata.length * 280;
				this.formWidth = this.czdata.length * 280 + 142;
			},
			titClick(num) {
				this.titXuan = num;
			},
			fanhui() {
				uni.navigateBack({
					delta: 1
				});
			},
			jinzhifx(data) {
				wxshare.config({
					debug: false, //是否打开调试
					appId: data.appId, // 公众号的唯一标识
					timestamp: data.timestamp, // 生成签名的时间戳
					nonceStr: data.nonce, // ，生成签名的随机串
					signature: data.signature, // 签名
					jsApiList: ["hideMenuItems"]
				});
				// 禁止分享
				wxshare.hideMenuItems({
					// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
					menuList: [
						"menuItem:share:appMessage",
						"menuItem:share:timeline",
						"menuItem:share:timeline",
						"menuItem:share:qq",
						"menuItem:favorite",
						"menuItem:share:QZone",
						"menuItem:openWithSafari"
					]
				});
			},
			jinzhi() {
				let _this = this;
				let param = window.location.href.split("#")[0];
				uni.request({
					method: "post",
					data: {
						url: param
					},
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},
					url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
					success(re) {
						_this.jinzhifx(re.data);
					}
				});
			},
			select(index) {
				uni.navigateTo({
					url: "/pages_my/select?type=" + index
				});
			},
		}
	};
</script>

<style lang="less" scoped>
	.top {
		background-color: transparent;
	}
	.jieguo {
		width: 690rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;

		.jieguo_tou {
			position: relative;
			width: 100%;
			height: 254rpx;
			background: linear-gradient(133deg,
					rgba(100, 182, 168, 0.62) 0%,
					#64b6a8 100%);
			border-radius: 6rpx;
			padding-top: 32rpx;

			.p1 {
				text-align: center;
				font-weight: 600;
				font-size: 38rpx;
				color: #fff;
			}

			.p2 {
				text-align: center;
				font-size: 24rpx;
				color: #fff;
				opacity: 0.7;
			}

			.bot {
				position: absolute;
				width: 100%;
				bottom: 22rpx;

				view {
					display: inline-block;
					width: 33.33%;

					p {
						text-align: center;
						font-size: 28rpx;
						color: #fff;
						opacity: 0.7;
					}
				}
			}
		}

		.biao {
			width: 690rpx;
			border: 2rpx solid #e0e0e0;
			margin-top: 20rpx;

			.biaotou {
				width: 100%;
				top: 0;

				view {
					display: inline-block;
					width: 25%;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					font-size: 28rpx;
					color: #333;
					font-weight: 600;
				}
			}

			.biaoList {
				width: 100%;
				height: 940rpx;
				overflow-y: auto;

				.li {
					view {
						display: inline-block;
						width: 25%;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						font-size: 28rpx;
						color: #333;
					}
				}
			}
		}
	}

	.jisuan {
		position: fixed;
		width: 670rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		background-color: #64b6a8;
		border-radius: 40rpx;
		bottom: 40rpx;
		left: 50%;
		font-size: 30rpx;
		transform: translateX(-50%);
	}

	.daikuanLi {
		margin-top: 50rpx;

		.left {
			display: inline-block;
			width: 200rpx;
			font-size: 28rpx;
			color: #000;
			margin-bottom: 60rpx;
			margin-left: 50rpx;
			margin-right: 20rpx;
		}

		.right {
			position: relative;
			display: inline-block;
			vertical-align: middle;
			box-sizing: border-box;
			width: 384rpx;
			height: 60rpx;
			padding-top: 8rpx;
			padding-left: 18rpx;
			border: 2rpx solid #d0d0d0;

			.jian {
				position: absolute;
				top: 22rpx;
				right: 30rpx;
				border-color: #999 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
				border-style: solid;
				border-width: 14rpx 8rpx 0rpx 8rpx;
				height: 0;
				width: 0;
			}
		}

		.left1 {
			width: 290rpx;
		}

		.right1 {
			width: 340rpx;
		}
	}

	.tuLiat {
		width: 100%;
		margin-top: 50rpx;
		overflow: auto;

		.div {
			display: flex;
			align-items: center;

			// height: 288rpx;
			.li {
				position: relative;
				display: inline-block;
				width: 240rpx;
				height: 270rpx;
				margin-top: 18rpx;
				margin-left: 18rpx;
				margin-right: 24rpx;
				border: 2rpx solid #d0d0d0;
				box-sizing: border-box;
				padding: 12rpx 8rpx;


				.guan {
					position: absolute;
					top: -20rpx;
					right: -20rpx;
					width: 36rpx;
					height: 36rpx;
					background-color: #999999;
					color: #fff;
					text-align: center;
					line-height: 36rpx;
					border-radius: 50%;
				}

				image {
					background-color: #f8f8f8;
					width: 220rpx;
					height: 146rpx;
				}

				.p1 {
					width: 220rpx;
					font-size: 24rpx;
					margin-top: 12rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.p2 {
					font-size: 26rpx;
					font-weight: 600;
					color: red;
					margin-top: 12rpx;
				}
			}
		}

		.name {
			font-size: 30rpx;
			font-weight: 600;
			color: #64b6a8;
			margin-left: 30rpx;
			margin-top: 40rpx;
			margin-bottom: 26rpx;
		}

		.form {
			display: flex;
			margin-left: 30rpx;
			border-left: 1px solid #e0e0e0;

			.hang {
				display: inline-block;
				vertical-align: top;
				border-bottom: 1px solid #e0e0e0;
				view {
					box-sizing: border-box;
					width: 140rpx;
					height: 78rpx;
					font-size: 24rpx;
					font-weight: 600;
					border-right: 2rpx solid #e0e0e0;
					border-top: 2rpx solid #e0e0e0;
					padding-top: 24rpx;
					text-align: center;
				}
			}

			.hang1 {
				display: inline-block;
				vertical-align: top;
				border-bottom: 1px solid #e0e0e0;
				view {
					box-sizing: border-box;
					width: 280rpx;
					height: 78rpx;
					font-size: 24rpx;
					border-right: 2rpx solid #e0e0e0;
					border-top: 2rpx solid #e0e0e0;
					padding: 20rpx 30rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;

					image {
						background-color: #f8f8f8;

						width: 220rpx;
						height: 140rpx;
					}
				}
			}
		}
	}

	.box {
		// position: absolute;
		width: 100%;
		// top: 0;
		// bottom: 0;
		color: #333;
		background-color: #fff;
		min-height: 100vh;
	}

	.tou {
		position: relative;
		width: 100%;
		// height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
		color: #fff;
		background-color: #64b6a8;

		image {
			position: absolute;
			width: 32rpx;
			height: 32rpx;
			// top: 116rpx;
			left: 30rpx;
		}
	}

	.tit {
		width: 750rpx;
		height: 100rpx;
		background: rgba(255, 255, 255, 0.39);
		box-shadow: 0px 2rpx 6rpx rgba(0, 0, 0, 0.08);

		view {
			display: inline-block;
			width: 50%;
			text-align: center;
			line-height: 100rpx;
			font-size: 32rpx;
		}

		.xuan {
			transform: scale(1.1);
			color: #64b6a8;
		}
	}

	.radio {
		font-size: 34rpx;
		margin-right: 20rpx;

		radio {
			margin-right: 10rpx;
		}
	}

	/deep/uni-radio .wx-radio-input,
	/deep/uni-radio .uni-radio-input {
		width: 36rpx;
		height: 36rpx;
	}

	/deep/.uni-radio-input-checked {
		background-color: #64b6a8 !important;
		border-color: #64b6a8 !important;
	}

	/deep/uni-radio .uni-radio-input {
		background-color: rgba(0, 0, 0, 0);
		border: 2rpx solid #999;
	}

	/deep/.uni-radio-input-checked {
		background-color: #64b6a8 !important;
		border: 2rpx solid #64b6a8 !important;
	}

	/deep/ uni-radio::before {
		font-size: 32rpx;
		margin-top: -16rpx;
		right: 4rpx !important;
	}

	.noneT {
		display: flex;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		color: #999;
		font-size: 40rpx;
		font-weight: bold;
	}
</style>
